<template>
   <div class="tags">
        <!-- <el-tag
            v-for="item in tags"
            :key="item.id"
            
            :effect="item.id ?'dark':'plain'">
            {{ hhhh }}
        </el-tag> -->
        <el-tag :effect="$route.name === item.id? 'dark':'plain'" 
        :closable=" item.name !=='首页'" 
        v-for="(item,index) in tags" :key="item.id"
         @click="changeMenu(item.path)"
         @close="closeTags(item,index)">
            {{item.name}}
        </el-tag>
   </div>
</template>

<script> 
import { mapMutations } from 'vuex'
export default {
   
     computed:{ 
        tags(){
            return this.$store.state.tab.breadMenu
        },
      
     },
      methods:{
        //改变路由
            changeMenu(path){
                this.$router.push(path)
            },
            closeTags(item,index){
        
              this.deleteTags(item)
              const length = this.tags.length;
             //如果此时删除的标签之后的隔了一个之后的那个标签是正在被选中的
             //就不用跳转
            //  if( item.id !== this.$route.path ){
            //     return ;
            //  }

              //如果是最后一个标签，要跳转到前一个标签的路由
            if(  index === length ){
                  this.$router.push( this.tags[index-1].path)
            }else{
                //在中间，就跳转到下一个标签
                this.$router.push( this.tags[index].path )
            }
               
            },
           ...mapMutations([ 'deleteTags' ])
        }

}
</script>

<style lang="less" scoped>
  .tabs{
    padding : 20px
  }
  
//   .tags{
//     padding-top: 4px;
//   }
  .el-tag--small{
    margin-left: 10px;
    margin-bottom: 10px;
  }
</style>